<template>
	<view class="app app-bg">
		<!-- 页面内容开始 -->

		<view>
			<u-cell-group>
				<u-cell-item @click="pageTo('/pages/user/setting/info')">
					<u-image slot="icon" width="100" height="100" :src="vk.getVuex('$user.userInfo.avatar')" class="avatar" mode="aspectFill" border-radius="20" :fade="false"></u-image>
					<view slot="title" class="nickname">{{ vk.getVuex('$user.userInfo.nickname') || $t('setting.no-nickname-set') }}</view>
				</u-cell-item>
				<u-cell-item :title="$t('setting.address-manage')" @click="pageTo('/pages/user/address/list')"></u-cell-item>
			</u-cell-group>
		</view>

		<view style="margin-top: 20rpx;">
			<u-cell-group>
				<u-cell-item :title="$t('setting.account-security')" :value="$t('setting.account-manage')" @click="pageTo('/pages/user/setting/account-security')"></u-cell-item>
			</u-cell-group>
		</view>

		<view style="margin-top: 20rpx;">
			<u-cell-group>
				<u-cell-item :title="$t('setting.language-setting')" :value="language.list[language.index].label" @click="language.show=true"></u-cell-item>
			</u-cell-group>
			<u-picker v-model="language.show" mode="selector" :range="language.list" :default-selector="[language.index]" range-key="label" @confirm="languageConfirm" :confirm-text="$t('system.confirm')" :cancel-text="$t('system.cancel')"></u-picker>
		</view>
		<view style="margin-top: 20rpx;">
			<u-cell-group>
				<u-cell-item :title="$t('setting.app-version')" :value="appVersionCom" :arrow="false"></u-cell-item>
			</u-cell-group>
		</view>

		<view style="position: absolute; bottom: 100rpx; width: 80%;left:10%;">
			<u-button type="error" @click="logout">{{ $t('system.logout') }}</u-button>
		</view>

		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<vk-data-loading v-model="loading"></vk-data-loading>
	</view>
</template>

<script>
	var vk = uni.vk;			// vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				// init请求返回的数据
				data:{

				},
				// 表单请求数据
				form1:{

				},
				scrollTop:0,
				loading:false,
				language:{
					index:0,
					show:false,
					list:vk.getLocaleList()
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options){
				console.log("init: ",options);
				uni.setNavigationBarTitle({
					title: this.$t('page.setting')
				});
				let { language } = this;
				let locale = vk.getLocale();
				let index = vk.pubfn.getListIndex(language.list, "value", locale);
				if (index > -1) {
					language.index = index;
				}
			},
			pageTo(path){
				vk.navigateTo(path);
			},
			languageConfirm(e=[]){
				let { language } = this;
				let index = e[0];
				let item = language.list[index];
				if (item && item.value) {
					let systemInfo = uni.getSystemInfoSync();
					if (systemInfo.platform.toLowerCase() === 'android') {
						vk.confirm(this.$t('setting.language-change-confirm'), res => {
							if (res.confirm) {
								language.index = index;
								vk.setLocale(item.value);
								this.$i18n.locale = item.value;
							}
						});
					} else {
						language.index = index;
						vk.setLocale(item.value);
						this.$i18n.locale = item.value;
					}
				}
			},
			// 退出
			logout(){
				vk.userCenter.logout({
					success: (data) => {
						let { login } = vk.getConfig();
						vk.reLaunch(`${login.url}?change=true`); // 表示切换账号
					}
				});
			},
		},
		// 监听器
		watch:{

		},
		// 计算属性
		computed:{
			appVersionCom(){
				let version;
				// #ifdef MP
				try {
					const info = uni.getAccountInfoSync();
					version = info.miniProgram.version;
					if (info.miniProgram.envVersion !== "release") {
						let envObj = {
							"develop": "开发版",
							"trial": "体验版",
							"release": "正式版",
							"gray": "灰度版", // 仅支付宝小程序支持
						};
						version = envObj[info.miniProgram.envVersion];
					}
				} catch(err){}
				// #endif
				if (!version && typeof uni.getAppBaseInfo === "function") {
					const appBaseInfo = uni.getAppBaseInfo();
					let { appVersion, appWgtVersion } = appBaseInfo;
					version = appWgtVersion || appVersion;
				}
				return version;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.avatar{
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.nickname{
		margin-left: 20rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
</style>
